<!DOCTYPE html>
<html>
<head>
	<title>JavaScript 面试题</title>
</head>
<body>
	<div id="box"></div>
</body>
<style type="text/css">
	* {padding: 0;margin: 0;}
	div {
		padding: 20px;
		background: rgba(0, 0, 0, .7);
		color: #fff;
		font-size: 12px;
		margin-bottom: 20px;
	}
</style>
<script type="text/javascript">
window.onload = function() {
	const html = `
		for (var i = 0; i < 5; i++) {
		  console.log(i);
		}
	`;
	document.getElementById('box').innerText = html
}

/*-----------5---------*/
// for (var i = 0; i < 5; i++) {
//   console.log(i);
// }
// 结果:立马输出:0 1 2 3 4
/*-----------5---------*/

/*-----------4---------*/
// for (var i = 0; i < 5; i++) {
//   setTimeout(function() {
//     console.log(i);
//   }, 1000 * i);
// }
// 结果:每隔1s执行一次5,共总执行5,输出5个5
/*-----------4---------*/

/*-----------3---------*/
// for (var i = 0; i < 5; i++) {
//   (function(i) {
//     setTimeout(function() {
//       console.log(i);
//     }, i * 1000);
//   })(i);
// }
// 结果:每隔1s执行一次,0 1 2 3 4
/*-----------3---------*/

/*-----------2---------*/
// for (var j = 0; j < 5; j++) {
//   (function() {
//     setTimeout(function() {
//       console.log(j);
//     }, j * 1000);
//   })(j);
// }
// 结果:每个1s钟输出一个5,总共5个5

/*-----------2---------*/


/*-----------1---------*/
// for (var i = 0; i < 5; i++) {
//     console.log('0,', new Date().getTime())
//     setTimeout((function(i) {
//         console.log('1,', new Date().getTime())
//         console.log(i);
//         console.log('2,', new Date().getTime())
//     })(i), i * 1000);
//     console.log('3,', new Date().getTime())
// }
/* 结果:console.log立马执行 没有任何延迟 由此可见()()立即执行不受setTimeout的影响 */
/*-----------1---------*/
</script>
</html>